/**
 * 鼠标划过提示
 * 监听feature滑入事件，显示提示
 * 监听feature滑动事件,更新提示位置
 * 监听feature滑出事件,关闭提示
 * 提取当前feature的name属性作为提示内容，当前鼠标位置为提示位置
 * @param {*} districtExplorer
 * @param {*} map
 */

import $ from 'jquery';

export default function addTipmark(districtExplorer, map) {
    // 提示文本容器
    let tipMarkerContent = $(
        '<div style="color:white;font-size:25px;width:10vw"></div>'
    );
    let tipMarker = new AMap.Marker({
        content: tipMarkerContent.get(0),
        offset: new AMap.Pixel(0, 0),
        bubble: true,
        zIndex: 999,
    });
    //监听feature的hover事件
    districtExplorer.on("featureMouseout featureMouseover", function (e, feature) {
        toggleHoverFeature(
            feature,
            e.type === "featureMouseover",
            e.originalEvent ? e.originalEvent.lnglat : null
        );
    });
    //监听鼠标在feature上滑动
    districtExplorer.on("featureMousemove", function (e) {
        //更新提示位置
        tipMarker.setPosition(e.originalEvent.lnglat);
    });

    // ------- 鼠标滑过提示 --------------
    function toggleHoverFeature(feature, isHover, position) {

        tipMarker.setMap(isHover ? map : null);

        if (!feature) {
            return;
        }

        let props = feature.properties;
        if (isHover) {
            //更新提示内容
            tipMarkerContent.html(props.name);
            //更新位置
            tipMarker.setPosition(position ? position : props.center);
        }
    }
}